<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>

// console.log( 1 );
// setTimeout(()=>{// f1
//     console.log( 2 );
// },0);
// console.log( 3 );
// 1 3 2

// 事件队列：[f1]
// 执行栈：
// console.log( 1 )
// setTimeout() -> 告诉计时器线程，给f1计时0毫秒，计时完成之后f1被加入事件队列
// console.log( 3 )
// 此时，JS引擎空闲了，开始处理事件队列中的回调函数
// f1()
    // console.log( 2 );


console.log( 1 );
setTimeout(()=>{// f1
    console.log( 2 );

    setTimeout(()=>{// f2
        console.log( 3 );
    },5);

    console.log( 4 );
},10);
console.log( 5 );

setTimeout(()=>{// f3
    console.log( 6 );
},10);

// 1 5 2 4 6 3

// 事件队列：[f1, f3, f2]
// 执行栈：
// console.log( 1 );
// setTimeout() -> 告诉计时器线程，给f1计时10毫秒，计时完成之后f1被加入事件队列
// console.log( 5 );
// setTimeout() -> 告诉计时器线程，给f3计时10毫秒，计时完成之后f3被加入事件队列
// 此时，JS引擎空闲了，开始处理事件队列中的回调函数
// f1()
    // console.log( 2 );
    // setTimeout() -> 告诉计时器线程，给f2计时20毫秒，计时完成之后f2被加入事件队列
    // console.log( 4 );
// 此时，JS引擎空闲了，开始处理事件队列中的回调函数
// f3()
    // console.log( 6 );
// 此时，JS引擎空闲了，开始处理事件队列中的回调函数
// f2()
    // console.log( 3 );
// 此时，JS引擎空闲了，开始处理事件队列中的回调函数(轮询)


// 事件循环机制：
// 1.当一段脚本要执行的时候，js引擎会解析这段代码，将同步程序按照执行顺序加入执行栈
// 2.当js引擎遇到异步事件时，并不会一直等待异步的结果，而是交给其他线程来处理，继续执行后面的同步程序
// 3.当异步事件完成/有结果时，对应的回调函数会被加入到事件队列中，等待js引擎空闲时来处理
// 4.当js引擎执行回调函数时，回调函数中又可能有同步和异步程序，此时重复上述123步
// 5.上述步骤反复执行的过程，即所谓的'事件循环 Event Loop'


</script>
</body>
</html>